<template>
    <div v-loading="listLoading" class="body">
        <TitleTips title="新增单价记录" />
        <BaseTable :columns="columns" :data="list" style="margin-bottom: 24px;">
            <template #handle="{ scope: { row } }">
                <BaseButton type="text" @click="handleDetail(row.id)"> 查看详情 </BaseButton>
            </template>
        </BaseTable>
        <Pagination 
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                style="text-align: right;padding-top: 25px;"
                @size-change="getList"
                @current-change="getList"
            />
    </div>
</template>

<script>
import { ContractPriceModel } from '@/models'

export default {
    name: 'ListPrice',
    data() {
        return {
            model: new ContractPriceModel(),
            list: [],
            listLoading: false,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            id: '',
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'declarationCode',
                        label: '申报编号',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'applyDate',
                        label: '申请日期',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'approvalDate',
                        label: '审批通过日期',
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'declarationBasis',
                        label: '申报依据',
                        'min-width': '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'operatorName',
                        label: '操作人',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'operatorOrgName',
                        label: '所属部门',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'createTime',
                        label: '操作时间',
                        width: '160',
                    }
                },
                {
                    slot: 'handle',
                    attrs: {
                        label: '操作',
                        width: '120',
                    }
                }
            ])
        }
    },
    created () {
        this.id = this.$route.query.id
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            this.model
                .getList({...this.page, contractId: this.id})
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        handleDetail(id) {
            this.$router.push({
                name: 'ContractUnitPriceDetail',
                query: {
                    id: id
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>

</style>
